<template>
  <view class="tv-keyboard" :style="{ width }">
    <tv-area>
      <view class="tv-keyboard__list">
        <tv-view :style="`flex: 0 0 calc(100% / ${number} - ${gutter * 2}rpx); margin: ${gutter}rpx`" v-for="(item, index) in keyboardList" @click.native="keyClick(item)" @tv-click="keyClick(item)" :key="index">{{ item }}</tv-view>
      </view>
      <view class="tv-keyboard__handle">
        <tv-view :style="`margin: ${gutter}rpx`" @click.native="keyClick('del')" @tv-click="keyClick('del')">
          <slot name="delete">删除</slot>
        </tv-view>
        <tv-view :style="`margin: ${gutter}rpx`" @click.native="keyClick('back')" @tv-click="keyClick('back')">
          <slot name="back">退格</slot>
        </tv-view>
      </view>
    </tv-area>
  </view>
</template>

<script>
  /**
   * tv-keyboard 软键盘
   * @description 软键盘，用于输入内容，需要在tv-page内使用
   * @property { width } 软键盘宽度
   * @property { number } 每行个数
   * @property { gutter } 元素之间间隔
   * @event { keyClick } 软键盘按键被点击
   */
  import { keyboardList } from '../../config/index.js';

  export default {
    props: {
      // 软键盘宽度
      width: {
        type: String,
        default: 'auto'
      },
      // 每行个数
      number: {
        type: Number,
        required: true
      },
      // 间隔
      gutter: {
        type: Number,
        default: 6
      }
    },
    data: () => ({
      keyboardList // 软键盘按键列表
    }),
    methods: {
      // 软键盘按键被点击
      keyClick(key) {
        this.$emit('keyClick', key);
      }
    }
  };
</script>

<style lang="scss" scoped>
.tv-keyboard {
  &__list, &__handle {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .tv-view {
      color: #fff;
      width: 23.44rpx;
      height: 23.44rpx;
      font-size: 13.28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3.12rpx;
      background: rgba(255, 255, 255, 0.2);
      &.active {
        color: #000;
        background: #fff;
        box-shadow: none;
      }
    }
  }
  &__handle {
    .tv-view {
      flex: 1;
    }
  }
}
</style>
